<!--
 * @Author: hua
 * @Date: 2020-07-21 14:20:36
 * @description: 
 * @LastEditors: hua
 * @LastEditTime: 2020-08-11 14:10:40
--> 
<template>
  <div class="container">
    <h4>{{$t('bindedEqiupment')}}</h4>
    <div class="top-search">
      <el-form :model="searchForm" inline size="mini">
        <el-form-item :label="$t('BackCode')+':'">
          <el-input v-model="searchForm.shellQrCode" :placeholder="$t('entryBackCode')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('IMEI')+':'">
          <el-input v-model="searchForm.simcardImei" :placeholder="$t('entryIMEI')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findList">{{$t('search')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pagination">
      <el-pagination
        :current-page="searchForm.pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-table
      v-loading="listLoading"
      fit
      highlight-current-row
      :data="tableData"
      style="width: 100%"
      @sort-change="handleSort"
    >
      <el-table-column sortable prop="simcardImei" :label="$t('IMEI')"></el-table-column>
      <el-table-column sortable prop="shellQrCode" :label="$t('BackCode')"></el-table-column>
      <!--  <el-table-column prop="CreatedBy" :label="$t('CreatedBy')"></el-table-column> -->
      <el-table-column sortable prop="creationDate" :label="$t('CreatedOn')">
        <template slot-scope="scope">
          <div
            v-if="scope.row.creationDate"
          >{{formatDate(scope.row.creationDate/1000,"yyyy-MM-dd hh:mm:ss")}}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="lastModifiedDate" :label="$t('lastModifiedDate')">
        <template slot-scope="scope">
          <div
            v-if="scope.row.lastModifiedDate"
          >{{formatDate(scope.row.lastModifiedDate/1000,"yyyy-MM-dd hh:mm:ss")}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;width:100%;justify-content:flex-end;margin-top:20px">
      <el-button type="primary" style="width:150px" @click="goHisotry">{{$t('close')}}</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Message } from "element-ui";
import HeaderBindEquipment from "@/components/HeaderBindEquipment/index";
import { getLockPage } from "@/api/lock";
import { setProductionBatch } from "@/utils/auth";
export default {
  name: "b-table",
  data() {
    return {
      searchForm: {
        shellQrCode: "",
        simcardImei: "",
        pageNumber: 0,
        pageSize: 10,
        orderBy: "id",
        sortBy: "DESC",
      },
      total: 0,
      tableData: [],
      listLoading: false,
    };
  },
  components: { HeaderBindEquipment },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.findList();
  },
  methods: {
    findList() {
      this.listLoading = true;
      getLockPage(
        this.searchForm.shellQrCode,
        this.searchForm.simcardImei,
        this.searchForm.pageNumber,
        this.searchForm.pageSize,
        this.searchForm.orderBy,
        this.searchForm.sortBy
      )
        .then((res) => {
          this.tableData = res.body.content;
          this.total = res.body.totalElements;
          console.log(res.body);
          this.listLoading = false;
        })
        .catch((e) => {
          this.listLoading = false;
        });
    },
    handleSort({ column, prop, order }) {
      if (!prop) return;
      if (order == "descending") {
        this.searchForm["sortBy"] = "DESC";
        this.searchForm["orderBy"] = prop;
      } else {
        this.searchForm["sortBy"] = "ASC";
        this.searchForm["orderBy"] = prop;
      }
      this.findList();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.findList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNumber = val - 1;
      console.log(`当前页: ${val}`);
      this.findList();
    },
    goHisotry() {
      window.history.go(-1);
    },
    formatDate(time, format) {
      if (!time) {
        return "";
      }
      var re = /-?\d+/;
      var m = re.exec(time * 1000);
      var d = new Date(parseInt(m[0]));
      var o = {
        "M+": d.getMonth() + 1, //month
        "d+": d.getDate(), //day
        "h+": d.getHours(), //hour
        "m+": d.getMinutes(), //minute
        "s+": d.getSeconds(), //second
        "q+": Math.floor((d.getMonth() + 3) / 3), //quarter
        S: d.getMilliseconds(), //millisecond
      };
      if (/(y+)/.test(format)) {
        format = format.replace(
          RegExp.$1,
          (d.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return format;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  padding: 10px 20px 10px 20px;
  overflow: auto;
  height: 100%;
}
.box-card {
  cursor: pointer;
}
.item {
  height: 30px;
  line-height: 30px;
}
.pagination {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
